<script setup name="HomeHeaderMsg">
import useMsg from '@/hooks/api/useMsg'
import useVerify from '@/hooks/api/useVerify'
import useSiteSettingsStore from '@/store/hooks/useSiteSettingsStore'
import { fmtDate } from '@/utils/timeAgo'
import { storeToRefs } from 'pinia'
import { toRef } from 'vue'

const visible = ref(false)
const formParams = reactive({
  content: '',
  nickname: '',
  verify_str: ''
})
const rules = reactive({
  content: [{ required: true, message: '请输入留言信息', trigger: 'blur' }],
  nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  verify_str: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})

const { verify_image, verify_refresh } = useVerify()

const siteSettingsStore = useSiteSettingsStore()
const refSiteSettingsStore = storeToRefs(siteSettingsStore)
const msg_params = reactive({
  page: 1,
  size: 10,
})

const { message, total } = useMsg(refSiteSettingsStore.user_id, toRef(msg_params, 'page'), toRef(msg_params, 'size'))
// fmtDate()
</script>

<template>
  <div>
    <div class="flex items-center cursor-pointer" @click.prevent="visible = true">
      <app-icon class="mr-1" icon="bx:bx-message-detail"></app-icon>留言
    </div>
    <el-dialog v-model="visible" title="留言版" width="450px">
      <div class="header">
        <el-form :model="formParams" :rules="rules">
          <el-form-item prop="content">
            <el-input
              v-model="formParams.content"
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="留言内容，留言对所有人公开，请勿填写私密信息"
            ></el-input>
          </el-form-item>
          <div class="flex space-x-2">
            <el-form-item prop="nickname">
              <el-input v-model="formParams.nickname" :autosize="{ minRows: 2 }" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item prop="verify_str">
              <el-input
                v-model="formParams.verify_str"
                :autosize="{ minRows: 2 }"
                :maxlength="4"
                placeholder="验证码"
              ></el-input>
            </el-form-item>

            <img
              style="height: 32px;"
              :src="verify_image"
              alt="verify image"
              @click="verify_refresh"
            />
          </div>
        </el-form>
      </div>
      <div class="main">
        <div class="border-t border-gray-300 mt-2 mb-6"></div>
        <ol class="msg-items">
          <li
            v-for="item in message"
            :key="item.id"
            class="msg-item mt-2 p-2 bg-gray-100 box-border"
          >
            <div class="msg-item-header flex items-center">
              <el-tag size="small" type="danger" effect="dark">置顶</el-tag>
              <div class="ml-2 text-blue-600 font-bold">{{ item.nickname }}</div>
            </div>
            <div
              class="msg-item-content mt-2 decoration-slice decoration-gray-800"
            >{{ item.content }}</div>
            <div class="msg-item-date mt-1.5 flex justify-end">{{ fmtDate(item.created_at) }}</div>
          </li>
        </ol>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
</style>
